<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link th:replace="blog/common::head">
    <link rel="stylesheet" th:href="@{/admin/css/index.css}">
    <title>Title</title>

</head>
<body>
<div style="height: 80px;width:100%;"></div>
<div th:include="blog/common::top"></div>

<div class="container">
    <div>
        <!--分类导航-->
        <div class="col-xs-1 nave hidden-xs" style="height: 100%">
            <ul style="padding: 0;margin: 0">
                <li><a th:href="@{/blog/}" class="li">所有</a></li>
                <li><a th:href="@{/blog/sortIndex/java}" class="li">java</a></li>
                <li><a th:href="@{/blog/sortIndex/Php}" class="li">Php</a></li>
                <li><a th:href="@{/blog/sortIndex/python}" class="li">python</a></li>
                <li><a th:href="@{/blog/sortIndex/html}" class="li">html</a></li>
                <li><a th:href="@{/blog/sortIndex/css}" class="li">css</a></li>
                <li><a th:href="@{/blog/sortIndex/js}" class="li">js</a></li>
                <li><a th:href="@{/blog/sortIndex/boot}" class="li">boot</a></li>
                <li><a th:href="@{/blog/sortIndex/mybatis}" class="li">mybatis</a></li>
                <li><a th:href="@{/blog/sortIndex/spring}" class="li">spring</a></li>
            </ul>
        </div>

        <!--博客展示-->
        <div class="col-xs-8">
            <!--宣传照片-->
            <div class="row">
                <div class="col-xs-7 col-xs-offset-1">
                    <div class="layui-carousel" id="test10">
                        <div carousel-item="">
                            <div><img src="/admin/img/3.png" alt=""></div>
                            <div><img src="/admin/img/4.png" alt=""></div>
                            <div><img src="/admin/img/5.png" alt=""></div>
                            <div><img src="/admin/img/6.png" alt=""></div>
                            <div><img src="/admin/img/7.png" alt=""></div>
                            <div><img src="/admin/img/8.png" alt=""></div>
                        </div>
                    </div>
                </div>
                <div class="col-xs-3">
                    <div style="padding-bottom: 10px">
                        <img th:src="@{/admin/img/1.png}" style=" width: 100%;height: 125px ">
                    </div>
                    <img th:src="@{/admin/img/3.png}" style=" width: 100%;height: 125px ">
                </div>
            </div>

            <!--博客展示-->

            <div style="padding: 10px 40px" th:each="blog,stut :${blogContent}" class="col-xs-offset-1">
                <div class="row"><a
                        th:href="@{/toBlogContent/}+${blog.getBCid()}+'/'+(${session.id} != null ? ${session.id} : xxx)"
                        style="color: #000000;">
                    <h4 th:text="${blog.getName()}"></h4>
                    <div class="row">
                        <div class="col-xs-1"><img th:src="@{/admin/img/}+${stut.count%8}+'.png'"
                                                   style="height: 50px;width: 50px;border-radius: 25px"></div>
                        <div class="col-xs-11" th:text="${blog.getRepresent()}"></div>
                    </div>
                </a>
                    <div class="glyphicon glyphicon-thumbs-up col-xs-1 col-xs-offset-11"
                         th:text="${blog.getPraiseCount()}">&nbsp;12
                    </div>
                </div>
            </div>
        </div>
        <!--排行榜-->
        <div class="col-xs-3 hidden-xs">
            <div>
                <h3 class="text-danger col-xs-offset-1">排行榜:</h3>
            </div>

            <div class="row col-xs-offset-1" th:each="ranking:${list}">
                <div class="col-xs-4">
                    <div style="padding-right: 10px;margin-right: 40px">
                        <img th:src="@{/abc/}+${ranking.getHeadPath()}" alt="head"
                             style="height: 70px;width: 70px;border-radius: 35px">
                    </div>
                </div>
                <div class="col-xs-8" style="margin-top: 30px">
                    <div style="padding-left: 10px">
                        <h4 th:text="${ranking.getUserName()}">欧阳锋</h4>
                        <p>发表博客数量:[[${ranking.getRank()}]]</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
</div>


<script th:replace="blog/common::#commonjs"></script>

<script>
    layui.use(['carousel', 'form'], function () {
        var carousel = layui.carousel
            , form = layui.form;

        //常规轮播
        carousel.render({
            elem: '#test1'
            , arrow: 'always'
        });

        //改变下时间间隔、动画类型、高度
        carousel.render({
            elem: '#test2'
            , interval: 150
            , anim: 'fade'
            , height: '120px'
        });

        //设定各种参数
        var ins3 = carousel.render({
            elem: '#test3'
        });
        //图片轮播
        carousel.render({
            elem: '#test10'
            , width: '100%px'
            , height: '260px'
            , interval: 5000
        });

        //事件
        carousel.on('change(test4)', function (res) {
            console.log(res)
        });
        var $ = layui.$, active = {
            set: function (othis) {
                var THIS = 'layui-bg-normal'
                    , key = othis.data('key')
                    , options = {};

                othis.css('background-color', '#64b86b').siblings().removeAttr('style');
                options[key] = othis.data('value');
                ins3.reload(options);
            }
        };
    });
</script>

</body>
</html>